<!--
 * @FileDescription 终端
 * @Author lz
 * @Date 20230330 10:57:59
 * @LastEditors lz
 * @LastEditTime 20230330 10:57:59
-->
<template>
    <div class="TerBox">
        <div class="headerBox">
            <div class="labBox">
                File
            </div>
            <div class="labBox">
                Edit
            </div>
            <div class="labBox">
                View
            </div>
            <div class="labBox">
                Search
            </div>
            <div class="labBox">
                Termlnal
            </div>
            <div class="labBox">
                Help
            </div>
            <CloseOutlined class="CloseOutlined" @click="ret()" />
        </div>
        <div class="DataListBox" id="scrolldIV">
            <div class="DataList" v-for="(item, index) in state.TerminalDataList" :key="index">
                <span class="names">{{ item.names }} </span><a-input v-model:value="item.inpVal"
                    @pressEnter="pressEnter(item.inpVal, index)" class="dataInput" v-if="item.types == 0"
                    :autofocus="true" />
                <span v-else class="names_2">&nbsp;&nbsp;{{ item.inpVal }}</span>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { message } from 'ant-design-vue';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue'
import HomeContent from '../HomeContent';

let KeyVal = ref('');

document.onkeydown = function (e) {
    if (e.key == 'Control') {
        KeyVal.value = e.key
    }
    if (e.key == 'c' || e.key == 'C') {
        if (KeyVal.value == 'Control') {
            WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithUnmannedKeyBoardRequest('ctrl,c'))
        }
    }
}

document.onkeyup = function (e) {
    KeyVal.value = ''
}

// 定义函数
function page_scroll() {
    var i = 1
    var element = document.getElementById("scrolldIV")
    // element!.scrollTop = 0;  // 不管他在哪里，都让他先回到最上面
    console.log(element!.scrollTop);
    console.log(element!.clientHeight);
    console.log(element!.scrollHeight);

    // 设置定时器，时间即为滚动速度
    function main() {
        if (element!.scrollTop + element!.clientHeight == element!.scrollHeight) {
            clearInterval(interval)
            console.log('已经到底部了')
        } else {
            element!.scrollTop += 300;
            console.log(i);
            i += 1;
        }
    }
    // 定义ID
    const interval = setInterval(main, 200)
}

const state = reactive({
    TerminalDataList: [
        { names: '[apollo@in-runtime-docker:/apollo]:$', inpVal: '', types: 0 },
    ],
    // 记录步骤
    StepSequence: 0,
});
function ret() {
    HomeContent.Default.UBANTUVal.value = 0
}
// 终端反馈
async function pressEnter(val: string, index: number) {
    //发送终端内容
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackContentRequest(val))
    state.TerminalDataList[index].types = 1
    if (state.StepSequence == 0) {
        if (val == 'cd data/bag') {

            state.StepSequence = 1
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag]:$', inpVal: '', types: 0 })
        } else {
            message.error('无当前指令');
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo]:$', inpVal: '', types: 0 })
        }
    } else if (state.StepSequence == 1) {
        if (val == 'rm -rf map_tmp') {

            state.StepSequence = 2
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag]:$', inpVal: '', types: 0 })
        } else {
            message.error('无当前指令');
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag]:$', inpVal: '', types: 0 })
        }
    } else if (state.StepSequence == 2) {
        if (val == 'mkdir map_tmp') {

            state.StepSequence = 3
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag]:$', inpVal: '', types: 0 })
        } else {
            message.error('无当前指令');
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag]:$', inpVal: '', types: 0 })
        }
    } else if (state.StepSequence == 3) {
        if (val == 'cd map_tmp') {

            state.StepSequence = 4
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag/map_tmp]:$', inpVal: '', types: 0 })
        } else {
            message.error('无当前指令');
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag/map_tmp]:$', inpVal: '', types: 0 })
        }
    } else if (state.StepSequence == 4) {
        if (val == 'cyber_recorder record -c /apollo/localization/pose') {

            state.StepSequence = 5
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:]', inpVal: '[RUNNING] Record Time :168421901 Progress: 1 channels , 1 messages', types: 1 })
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag/map_tmp]:$', inpVal: '', types: 0 })
        } else {
            message.error('无当前指令');
            state.TerminalDataList.push({ names: '[apollo@in-runtime-docker:/apollo/data/bag/map_tmp]:$', inpVal: '', types: 0 })
        }
    }
    page_scroll()

}
</script>

<style scoped>
.TerBox {
    width: 1854px;
    height: 1050px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-top: 40px;
}

.DataListBox {
    height: 1010px;
    overflow-y: auto;
}

.headerBox {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: #999;
    display: flex;
}

.labBox {
    margin: 0 10px;
}

.CloseOutlined {
    position: absolute;
    right: 0;
    font-size: 20px;
    margin-top: 8px;
    margin-right: 8px;
}

.DataList {
    color: #fff;
    font-size: 16px;
    line-height: 35px;
}

.names {
    color: rgb(131, 248, 127);
    font-size: 16px;
}

.names_2 {
    font-size: 16px;
    white-space: pre;
}

.dataInput {
    color: #fff;
    border: none;
    outline: none !important;
    box-shadow: none;
    font-size: 16px;
    width: 70%;
    background: transparent;
    margin-left: -2px;
}
</style>